<template>
  <div class="bb">
    <!-- 日记弹出层头部导航栏 -->
      <NavTop>
        <template #left>
          <van-icon name="cross" @click="backFn" />
        </template>
        <template #calendarbox2>
          <span>{{ date }}</span>
          <p>{{ week }}&nbsp; &nbsp;{{ time }}</p>
        </template>
        <template #right>
          <van-icon name="success" @click="logFn" />
        </template>
      </NavTop>
    <!-- 富文本编辑器组件 -->
    <TextEditor ref="empty"></TextEditor>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { addDiaryApi, upArticleImgApi } from '@/api/index'
import NavTop from '@/components/home/homenNavTop.vue'
import TextEditor from '@/components/textEditor/textEditor.vue'
export default {
  data () {
    return {
      date: '', // 月日
      week: this.$store.state.userArticleData.week, // 星期
      time: this.$store.state.userArticleData.time// 时间
    }
  },
  components: {
    NavTop,
    TextEditor
  },
  activated () {
    this.date = this.$moment().format('MM月DD日')
  },
  methods: {
  // 退出日记编辑
    async backFn () {
      // 判断 文章和图片  是否为空 => 为空 直接退出编辑
      if (this.$store.state.userArticleData.content !== '' && JSON.stringify(this.$store.state.userArticleData.imgurl) !== '{}') {
        // this.addShow = false
        // console.log('1111')
        this.$router.replace('/home')
      } else {
        Dialog.confirm({
          message: '是否退出当前编辑'
        })
          .then(async () => {
            // on confirm
            // console.log('确定')
            // 清空日记数据 ==> ref引用
            this.$refs.empty.emptyFn()
            this.$router.replace('/home')
          })
          .catch(() => {
            // console.log('取消')
          })
      }
    },
    // 提交日记编辑
    async logFn () {
      const id = this.$store.state.userArticleData.id
      const articleid = this.$store.state.userArticleData.articleid
      const content = this.$store.state.userArticleData.content
      const tilength = this.$store.state.userArticleData.tilength
      const cityname = this.$store.state.userArticleData.cityname
      const wearther = this.$store.state.userArticleData.wearther
      const nowicon = this.$store.state.userArticleData.nowicon
      const temperature = this.$store.state.userArticleData.temperature
      const week = this.$store.state.userArticleData.week
      const time = this.$store.state.userArticleData.time
      const getdate = this.$store.state.userArticleData.getdate
      const imgurl = this.$store.state.userArticleData.imgurl

      if (content === '') {
        Dialog.alert({
          message: '亲~您还未记录内容噢'
        }).then(() => {
          // on close
        })
      } else {
        Toast.loading({
          message: '添加日记ing...',
          forbidClick: true,
          duration: 0
        })
        // 发起添加日记接口
        // console.log(this.getdate)
        const req1 = { id, content, tilength, cityname, wearther, nowicon, temperature, week, time, getdate }
        const data1 = await addDiaryApi(req1)
        // console.log(data1)
        if (data1.data.status === 201) {
          // 发起添加日记图片接口
          const req2 = { id, articleid, getdate, imgurl, content }
          const arr = JSON.parse(JSON.stringify(imgurl))
          // console.log(arr.length)
          // 判断用户上传图片没，上传了 => 发起存储 图片 接口
          if (arr.length > 0) {
            // const data2 =
            await upArticleImgApi(req2)
          }
          // 清空日记内容
          this.$refs.empty.emptyFn()
          Toast.clear()
          // this.addShow = false
          this.$router.replace('/home')
        } else {
          Toast.clear()
          Toast.fail('添加日记失败...')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.calendarbox2 {
  padding: 5px !important;
  span {
    font-size: 16px !important;
  }
  p {
    font-size: 13px !important;
  }
}
</style>
